import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// 模拟数据   人资项目已有现成接口，所以不需要模拟数据了
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
// 设置element为当前的语言
Vue.use(ElementUI, {
  // 表示指定使用i18n插件的t函数来翻译语言
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false

/**
 * 自定义指令
 * 语法：
 * Vue.directive('自定义指令名', {
  inserted(el, binding) {
    // el：指的时候使用该指令的DOM元素(标签)
    // binding.value:  使用指令时传入的数据
  }
})
 *
 * 使用：v-自定义指令名
*/
// 定义处理图片错误的指令  v-imgError
Vue.directive('imgError', {
  // inserted函数只有在使用指令的标签第一次插入到dom中的
  // 时候才会触发，数据更新的时候inserted是不会触发的。
  inserted(el, binding) {
    // el：指的时候使用该指令的DOM元素(标签)
    // binding.value:  使用指令时传入的数据
    console.log('自定义指令', el, binding.value)
    // 监听错误事件
    el.addEventListener('error', () => {
      // console.log('图片出错啦!')
      el.src = binding.value
    })
    // 判断后端返回的图片地址是否存在，不存在则赋值为默认的图片地址
    el.src = el.src ? el.src : binding.value
  },
  // update: 所有数据发生变化时触发，但是可能是在子组件的数据变化之前触发
  // componentUpdated：所有数据发生变化时触发（包括子组件的数据变化）
  componentUpdated(el, binding) {
    // console.log(666)
    // 监听错误事件
    el.addEventListener('error', () => {
      // console.log('图片出错啦!')
      el.src = binding.value
    })
    // 判断后端返回的图片地址是否存在，不存在则赋值为默认的图片地址
    el.src = el.src ? el.src : binding.value
  }
})

// 注册全局组件
import MyCard from './components/MyCard/index.vue'
Vue.component('MyCard', MyCard)
import PageTool from './components/PageTool/index.vue'
Vue.component('PageTool', PageTool)
import UploadExcel from '@/components/UploadExcel/index.vue'
Vue.component('UploadExcel', UploadExcel)
import Uploadimg from '@/components/UploadImg/index.vue'
Vue.component('Uploadimg', Uploadimg)
import ScreenFull from '@/components/ScreenFull/index.vue'
Vue.component('ScreenFull', ScreenFull)
import Theme from '@/components/ThemePicker/index.vue'
Vue.component('Theme', Theme)
import lang from '@/components/lang/index.vue'
Vue.component('lang', lang)

/**
 * 全局过滤器
 * 语法：
 * Vue.filter('自定义名字',(val)=>{
 *  val: 接收到的调用过滤器时传入的数据
 * })
 * 作用：接收并处理数据，并返回处理后的数据.
 *
 * 使用语法：
 * 变量名 | 自定义过滤器名字
 *
 * 这个竖杠我们可以称它为 “管道符”，所以这里的意思就是
 * 将来渲染代码的时候，变量名会通过这个管道符传递给过滤器
 * 过滤器中通过回调函数的参数接收到。
 *
 *  注意：过滤器一般只能用在插值表达式或者是动态属性中(v-bind)
 *
*/
// 格式化时间
// Vue.filter('formatDate', (val) => {
//   // val就是调用过滤器时传入的时间
//   if (!val) { return val }
//   return val.split('T')[0]
// })
// import { formatDate, add } from '@/filters/index'
// const obj = { formatDate, add }
// // Vue.filter('formatDate', formatDate)
// // Vue.filter('add', add)
// 问题：现在我们可以批量注册过滤器了，但是还是需要一个一个函数的导入
// 也是比较麻烦，那么能不能一次性全部函数导入呢？
// 答：可以，怎么导入呢？语法如下
/**
 * 导出全部语法的函数
 * import * as 自定义变量名 from '路径'
 *  * 表示匹配到文件中所有导出的函数，但是因为js规范中*是不能作为一个变量使用的
 * 所以我们还需要通过关键词as将其重命名为“其他符合js规范的名字”。
 * */
import * as obj from '@/filters/index'
// 批量注册全局过滤器的方法
for (const key in obj) {
  // key:obj对象中的属性名
  // obj[key]：key属性对应的值
  Vue.filter(key, obj[key])
}

// 全局注册混入对象
import mymixin from './mixin/index'
Vue.mixin(mymixin)

// 6、导入i18n 并把它注入到vue实例中
import i18n from './lang/index.js'
new Vue({
  el: '#app',
  router,
  store,
  // i18n: i18n,
  i18n, // 属性名不能修改，这里是上面一行代码的简写
  render: h => h(App)
})

/**
 * es6导入导出语法
 * 方式一：
 * 导出：export default {}
 * 导入：import 变量名 from '路径’
 *
 * 方式二：
 * 导出：export function 函数名(){}
 * 导入：import { 函数名 } from '路径'
 *  注意：导入的函数名必须和导出的函数名一致
 *
 * 方法三：
 * 导出：export function 函数名(){}
 * 同时导入所有函数：
 * import * as 自定义变量名 from '路径'
 *
 * */
